{% extends 'AdminBundle:base:index.html.twig' %}
    {% block title %}新建组{% endblock %}
    {% block description %}新建组并分配角色.{% endblock %}
    {% block css %}
        <link rel="stylesheet" href="/admin/assets/css/bootstrap-duallistbox.min.css"/>
    {% endblock %}

    {% block head %}{{ parent() }}{% endblock %}

    {% block breadcrumbs %}
        {% embed "AdminBundle:base:breadcrumbs.html.twig" %}
            {% block breadcrumb %}
                <li><a href="#">用户认证</a></li>
                <li><a href="{{ path('authgroup_index') }}">组</a></li>
                <li class="active">新建</li>
            {% endblock %}
        {% endembed %}
    {% endblock %}


    {% block content %}
        <form class="form-horizontal" role="form" action="{{ path('authgroup_new') }}" method="post">
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 组名称 </label>

                <div class="col-sm-9">
                    <input type="text" id="auth_group_name" name="auth_group[name]" placeholder="组名称"
                           required class="col-xs-10 col-sm-5"/>
                </div>
            </div>

            <div class="space-6"></div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 注释 </label>

                <div class="col-sm-9">
                    <input type="text" id="auth_group_note" name='auth_group[note]' placeholder="注释"
                           class="col-xs-10 col-sm-5"/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 启用 </label>
                <div class="col-sm-9">
                    <label>
                        <input name="auth_group[isEnabled]" class="ace ace-switch ace-switch-5" type="checkbox" checked>
                        <span class="lbl"></span>
                    </label>
                </div>
            </div>

            <div class="space-6"></div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-top" for="duallist"> 分配 </label>

                <div class="col-sm-8">
                    <select multiple="multiple" size="10" name="auth_group[role][]"
                            id="duallist">
                        {% for authRole in authRoles %}
                            <option value="{{ authRole.id }}" {{ authRole.selected }}>{{ authRole.name }}</option>
                        {% else %}
                            <option value="0">没有可分配</option>
                        {% endfor %}
                    </select>

                    <div class="hr hr-16 hr-dotted"></div>
                </div>
            </div>

            <div class="clearfix form-actions">
                <div class="col-md-offset-3 col-md-9">
                    <button class="btn btn-info" type="submit">
                        <i class="ace-icon fa fa-check bigger-110"></i>
                        Submit
                    </button>

                    &nbsp; &nbsp; &nbsp;
                    <button class="btn" type="reset">
                        <i class="ace-icon fa fa-undo bigger-110"></i>
                        Reset
                    </button>
                </div>
            </div>

        </form>

    {% endblock %}

    {% block plugin_scripts %}
        <script src="/admin/assets/js/jquery.bootstrap-duallistbox.min.js"></script>
    {% endblock %}

    {% block javascripts %}

        <!-- inline scripts related to this page -->
        <script type="text/javascript">
            jQuery(function ($) {
                var selectId = 'auth_group[role][]';
                var selector = 'select[name="' + selectId + '"]';
                var permission = $(selector).bootstrapDualListbox(
                        {
                            infoTextFiltered: '<span class="label label-purple label-lg">Filtered</span>',
                            infoText: '角色 {0}',
                            infoTextEmpty: '列表为空'
                        });
                var container1 = permission.bootstrapDualListbox('getContainer');
                container1.find('.btn').addClass('btn-white btn-info btn-bold');


                //in ajax mode, remove remaining elements before leaving page
                $(document).one('ajaxloadstart.page', function (e) {
                    $('[class*=select2]').remove();
                    $(selector).bootstrapDualListbox('destroy');
                });

            });

        </script>

    {% endblock %}
